import '@/assets/css/app.less';
import { ConfigProvider, ThemeConfig } from 'antd';

import { theme } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import { useAliveController } from 'react-activation';
import { useSelector } from 'react-redux';
import { AppContainer } from './layouts/app/AppContainer';

const { useToken } = theme;

// darkAlgorithm为暗色主题，defaultAlgorithm为亮色（默认）主题
// 注意这里的theme是来自于Ant Design的，而不是store
const { darkAlgorithm, defaultAlgorithm } = theme;

function App() {
  /**
   * 1.给需要控制缓存的 <KeepAlive /> 标签增加 name 属性
   * 2.使用 withAliveScope 或 useAliveController 获取控制函数
   * drop(name) 卸载缓存，不包括嵌套的KeepAlive
   * dropScope(name) 卸载缓存，包括嵌套的所有KeepAlive
   * refresh(name) 刷新缓存状态，不包括嵌套的KeepAlive
   * refreshScope(name) 刷新缓存状态，包括嵌套的所有KeepAlive
   * clear() 清空所有缓存
   * getCachingNodes() 获取所有缓存中的节点
   */
  const { drop, dropScope, clear, getCachingNodes } = useAliveController();

  // 获取store中的主题配置
  const globalTheme = useSelector((state: any) => state?.theme);

  // Ant Design主题变量
  let antdTheme: ThemeConfig = {
    // 亮色/暗色配置
    algorithm:
      globalTheme?.navTheme === 'dark' ? darkAlgorithm : defaultAlgorithm,
    token: {},
  };

  // 应用自定义主题色
  if (globalTheme?.colorPrimary) {
    antdTheme.token = {
      colorPrimary: globalTheme?.colorPrimary,
    };
  }

  return (
    // <PrivateRoute>
    <ConfigProvider locale={zhCN} theme={antdTheme}>
      <div className="app">
        <AppContainer />
      </div>
    </ConfigProvider>
    // </PrivateRoute>
  );
}

export default App;
